import React, { Component, Fragment } from 'react';
import Topbar from "../components/topbar";

import {ImgClass} from "../styled/text"

import {LeftOutlined} from "@ant-design/icons";
import {apilink} from "../api/apilink";
import store from "../store/index";
import {textdata} from "../store/actionCreator";
export default class text extends Component {
    constructor(props){
        super(props)
        this.state={
            arr:"",
            totalsEssay:"",
        }
    }
    componentDidMount(){
        store.subscribe(()=>{
            console.log(1)
            this.setState({
                totalsEssay:store.getState().textReducer.state
            })
            
        })  
        // apilink("http://localhost:4000/essay","get").then((ok)=>{
        //     console.log(ok);
        //     store.dispatch(textdata(ok))
        //     console.log(store.getState().textReducer.state)
            this.setState({
                totalsEssay:store.getState().textReducer.state
            })
        // }).catch((err)=>{   
        //     console.log(err);
        //     alert("数据加载失败,请重新加载")
        // })
        console.log(this.state.totalsEssay)
    }


    kind(){
        let arr = this.state.totalsEssay;
            for (var i = 0; i < arr.length; i++) {
                for (var j = i+1; j < arr.length; ) {
                    if(arr[i].kind==arr[j].kind){
                        arr.splice(j,1)
                    }else{
                        j++
                    }
                }
            }
            console.log(this.state.totalsEssay)
            // this.state.arr = arr;
        let kind = arr.map((item,index)=>{
            return (
                <Fragment key={index}>
                    <div className={index==0?"OneImg":"OtherImg"}>
                        <img src={item.img}  alt="加载错误" onClick={this.typeimg.bind(this,item.kind)}/>
                        <span className="text">{item.kind}</span>
                    </div>
                </Fragment>
            )
        })
        return kind;
    }
    typeimg(kind){
        console.log(kind)
        // this.props.history.push({pathname:"/detlist",state:{kind:kind}})
        this.props.history.push({pathname:"/detlist/"+kind})
    }
    jumpRouter(){
        this.props.history.push("/router")
    }
    render() {
        return (
            <div>
                <ImgClass>
                <Topbar>
                    <LeftOutlined onClick={this.jumpRouter.bind(this)}/>
                    <p>文字</p>
                </Topbar>
                    <div>{this.state.totalsEssay?this.kind():""}</div>
                </ImgClass>
            </div>
        )
    }
}
